<template>
  <view v-if="shenheStatus == 0" class="content">
    <template v-if="data">
      <singleHeader pageTitle=" "></singleHeader>

      <view class="downLoad">
        <image class="hdBg" :src="data.store_app_bg" mode="widthFix"></image>

        <view class="downLoadCon">
          <template v-if="hasRegister">
            <view class="formItem">
              <view class="flex">
                <u-input
                  class="input"
                  v-model="phone"
                  type="number"
                  placeholder="请输入手机号"
                  :custom-style="customStyle"
                  :height="height"
                ></u-input>
              </view>
            </view>

            <view class="formItem">
              <view class="flex">
                <u-input
                  class="input"
                  v-model="code"
                  type="number"
                  placeholder="请输入验证码"
                  :custom-style="customStyle"
                  :height="height"
                ></u-input>

                <view class="yzm">
                  <u-verification-code
                    :seconds="seconds"
                    @end="end"
                    ref="uCode"
                    change-text="Xs"
                    @change="codeChange"
                  ></u-verification-code>
                  <view @click="getCode">
                    {{ !hasYzm ? "获取验证码" : tips }}
                  </view>
                </view>
              </view>
            </view>

            <view class="formItem auto"></view>

            <view
              class="btn"
              :class="phone ? '' : 'disabled'"
              @click="onSmsLogin"
            >
              立即注册
            </view>
          </template>

          <template v-else>
            <view class="appInfo">
              <image :src="data.store_app_logo" mode="widthFix"></image>

              <view class="name">{{ data.store_name }}</view>

              <view class="des">下载APP获得更好的使用体验</view>
            </view>

            <view class="btnCon">
              <view class="btn" @click="downLoad('1')">苹果APP下载</view>
              <view class="btn" @click="downLoad('2')">安卓APP下载</view>
            </view>
          </template>
          <view class="text" @click="hasRegister = !hasRegister">
            {{ (hasRegister ? "直接下载" : "立即注册") + "APP>>" }}
          </view>
        </view>
      </view>
    </template>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { storeAppInfo } from "@/api/login";
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";

export default {
  components: {
    Shenhe,
    singleHeader
  },

  data() {
    return {
      login: false,
      data: null,
      phone: "",
      code: "",
      hasYzm: false,
      seconds: 60,
      customStyle: {
        borderRadius: "32px",
        display: "block",
        height: "72rpx",
        lineHeight: "72rpx",
        width: "100%",
        fontSize: "30rpx"
      },
      height: 96,
      hasRegister: true,
      tips: ""
    };
  },

  async onLoad() {
    const res = await storeAppInfo({}, true);
    if (!res.code) {
      this.data = res.data;
      return;
    }

    uni.showModal({
      title: "提示",
      content: res.msg,
      showCancel: false,
      success: () => {
        this.$utils.toUrl("/pages/home/home", "switchtab");
      }
    });
  },

  methods: {
    downLoad(type) {
      // #ifdef H5
      let url = "",
        { app_store_ios, app_store_android } = this.data;

      switch (type) {
        case "1":
          url = app_store_ios;
          break;

        case "2":
          url = app_store_android;
          break;
      }

      window.location.href = url;
      // #endif

      // #ifndef H5
      this.$u.toast("此功能只支持H5端");
      // #endif
    },

    codeChange(text) {
      this.tips = text;
    },

    end() {
      this.hasYzm = false;
    },

    async getCode() {
      try {
        let { phone } = this;
        if (!this.$u.test.mobile(phone))
          return this.$u.toast(this.$t("login.inputPhoneNumber"));

        if (this.$refs.uCode.canGetCode) {
          let data = { phone, code_type: "login" };
          await this.$allrequest.user.sms_code(data).then((res) => {
            if (!res.code) {
              uni.hideLoading();
              // 这里此提示会被this.start()方法中的提示覆盖
              this.$u.toast(this.$t("login.sentCode"));
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start();
              this.hasYzm = true;
            } else {
              this.$u.toast(res.msg);
            }
          });
        } else {
          this.$u.toast("倒计时结束后再发送");
        }
      } catch (error) {
        this.$u.toast(error);
      }
    },

    async onSmsLogin() {
      let { phone, code } = this;
      if (!phone) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      if (!this.$u.test.mobile(phone)) {
        uni.showToast({
          title: "手机号格式不正确",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      if (!code) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      try {
        const share_user_id = uni.getStorageSync("parent_user_id");
        const page_type = uni.getStorageSync("page_type");
        let result = await this.$allrequest.user.user_login(
          {
            phone,
            verify_code: code,
            share_user_id: share_user_id ? share_user_id : 0,
            _platform: "phone",
            isLogin: "1",
            page_type,
            login_type: 1,
          },
          true
        );
        if (!result.code) {
          this.$u.toast("注册成功请下载APP");
          this.hasRegister = false;
        } else {
          uni.showToast({
            title: result.msg,
            icon: "none",
            duration: 1000
          });
        }
      } catch (e) {
        uni.hideLoading();
        uni.showToast({
          title: "注册失败",
          icon: "none",
          duration: 1000
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  background: #f4f4f6;
  min-height: 100vh;
  padding-bottom: calc(env(safe-area-inset-bottom));
}

.hdBg {
  display: block;
  width: 100%;
}

.downLoad {
  position: relative;
  min-height: 500rpx;
}

.downLoadCon {
  position: absolute;
  left: 0;
  bottom: 100rpx;
  width: 100%;
  padding: 0 90rpx;
  box-sizing: border-box;

  .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96rpx;
    background: #f0250e;
    border-radius: 32px;
    color: #fff;
    font-size: 30rpx;
    font-weight: bold;
  }

  .disabled {
    background: #fcc1be;
  }
}

.formItem {
  display: flex;
  align-items: center;
  margin-bottom: 50rpx;
  background: #f2f2f2;
  border-radius: 32px;
  &.auto {
    margin-bottom: 0;
    height: 96rpx;
    background: none;
  }

  .flex {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 40rpx;
    border-radius: 32px;
  }

  .input {
    width: 100%;
    flex: 1;
  }
}

.yzm {
  color: #f60313;
}

.text {
  padding: 38rpx 0;
  color: #f60313;
  text-align: center;
  font-weight: bold;
  font-size: 30rpx;
}

.appInfo {
  text-align: center;
  image {
    width: 172rpx;
    height: 172rpx;
    border-radius: 32rpx;
  }

  .name {
    padding: 30rpx 0 24rpx;
    font-size: 36rpx;
    color: #262626;
  }

  .des {
    color: #8c8c8c;
    font-size: 30rpx;
  }
}

.btnCon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 100rpx;
  margin: 0 -16rpx;

  .btn {
    margin: 0 16rpx;
  }
}
</style>
